<template>
    <el-dialog v-model="visible" @close="closePage" :title="title" width="25%">
        <el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px" size="large">
            <el-form-item label="字典键" prop="key">
                <el-input v-model="formData.key" placeholder="请输入字典键" />
            </el-form-item>
            <el-form-item label="字典值" prop="value">
                <el-input v-model="formData.value" placeholder="请输入字典值" />
            </el-form-item>
            <el-form-item label="排序" prop="sort">
                <el-input-number v-model="formData.sort" :min="1" />
            </el-form-item>
            <el-form-item label="样式" prop="css">
                <el-select v-model="formData.css" placeholder="请选择样式" :clearable="true" :filterable="true">
                        <el-option v-for="(item, index) in cssList" :label="item" :value="item"
                            :key="index"></el-option>
                    </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="closePage">取消</el-button>
                <el-button type="primary" @click="addOrUpdate">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { addReq, updateReq } from "@/api/sys/dict/data/index.js"
import { success } from '@/utils/messageUtils.js';
const props = defineProps({
    querySelective: Function,
    dictType: String
})

const formRef = ref()
const formData = reactive({
    id: null,
    type: '',
    key: '',
    value: '',
    sort: null,
    css: ''
})

const formRules = {
    type: [{ required: true, message: '请输入字典类型', trigger: 'blur' }],
    key: [{ required: true, message: '请输入字典键', trigger: 'blur' }],
    value: [{ required: true, message: '请输入字典值', trigger: 'blur' }],
    sort: [{ required: true, message: '请输入排序', trigger: 'blur' }],
    css: [{ required: true, message: '请选择样式', trigger: 'blur' }],
}

const title = ref()
const isAdd = ref(true)
const visible = ref(false)
const open = (row) => {
    // 重置表单
    formRef.value?.resetFields()
    if (row) {
        title.value = '修改字典数据'
        isAdd.value = false

        formData.id = row.id
        formData.type = row.type
        formData.key = row.key
        formData.value = row.value
        formData.sort = row.sort
        formData.css = row.css
    } else {
        title.value = '添加字典数据'
        isAdd.value = true

        formData.id = null
        formData.type = props.dictType
        formData.key = ''
        formData.value = ''
        formData.sort = 1
        formData.css = ''
    }
    visible.value = true;
}

defineExpose({
    open,
})

// 关闭dialog
const closePage = () => {
    visible.value = false;
}

// 修改
const addOrUpdate = () => {
    formRef.value.validate((valid, fields) => {
        if (valid) {
            if (isAdd.value) {
                addReq(formData).then(res => {
                    if (res.code == 200) {
                        success(res.message);
                        props.querySelective();
                        closePage();
                    }
                })
            } else {
                updateReq(formData).then(res => {
                    if (res.code == 200) {
                        success(res.message);
                        props.querySelective();
                        closePage();
                    }
                })
            }
        }
    })
}

// tag标签样式
const cssList = ref(['primary','success','info','warning','danger'])
</script>